<!-- CharacterSelector.vue -->
<template>
  <div class="character-selector">
    <el-tabs v-model="activeTab">
      <!-- 下标字符标签页 -->
      <el-tab-pane label="下标字符" name="subscript">
        <div class="character-grid">
          <el-button
            v-for="(char, key) in subscripts"
            :key="`sub_${key}`"
            @click="selectCharacter(char)"
            class="char-button"
            size="small"
          >
            {{ char }}
          </el-button>
        </div>
      </el-tab-pane>
      
      <!-- 上标字符标签页 -->
      <el-tab-pane label="上标字符" name="superscript">
        <div class="character-grid">
          <el-button
            v-for="(char, key) in superscripts"
            :key="`sup_${key}`"
            @click="selectCharacter(char)"
            class="char-button"
            size="small"
          >
            {{ char }}
          </el-button>
        </div>
      </el-tab-pane>
      
      <!-- 常用字符标签页 -->
      <el-tab-pane label="常用字符" name="common">
        <div class="character-grid">
          <el-button
            v-for="(char, index) in commonChars"
            :key="`common_${index}`"
            @click="selectCharacter(char)"
            class="char-button"
            size="small"
          >
            {{ char }}
          </el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
    
    <!-- 底部输入框 -->
    <div class="selected-characters">
      <el-input
        ref="inputRef"
        v-model="selectedChars"
        placeholder="选中的字符将显示在这里"
        @blur="saveCursorPosition"
      >
        <template #append>
          <el-button @click="copyToClipboard">复制</el-button>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
const props = defineProps({
  selected: {
    type: String,
    default: ''
  }
})
// 定义事件
const emit = defineEmits(['character-selected'])

// 响应式数据
const activeTab = ref('subscript')
const selectedChars = ref(props.selected)
const inputRef = ref(null)
let lastCursorPosition = { start: 0, end: 0 }

const saveCursorPosition = () => {
  const input = inputRef.value ? inputRef.value.$el.querySelector('input') : null
  if (input) {
    lastCursorPosition = {
      start: input.selectionStart,
      end: input.selectionEnd
    }
  }
}


// 下标字符
const subscripts = {
  '0': '₀', '1': '₁', '2': '₂', '3': '₃', '4': '₄',
  '5': '₅', '6': '₆', '7': '₇', '8': '₈', '9': '₉',
  '+': '₊', '-': '₋', '=': '₌', '(': '₍', ')': '₎',
  'a': 'ₐ', 'e': 'ₑ', 'o': 'ₒ', 'x': 'ₓ',
  'h': 'ₕ', 'k': 'ₖ', 'l': 'ₗ', 'm': 'ₘ', 'n': 'ₙ',
  'p': 'ₚ', 's': 'ₛ', 't': 'ₜ'
}

// 上标字符
const superscripts = {
  '0': '⁰', '1': '¹', '2': '²', '3': '³', '4': '⁴',
  '5': '⁵', '6': '⁶', '7': '⁷', '8': '⁸', '9': '⁹',
  '+': '⁺', '-': '⁻', '=': '⁼', '(': '⁽', ')': '⁾',
  'A': 'ᴬ', 'B': 'ᴮ', 'D': 'ᴰ', 'E': 'ᴱ', 'G': 'ᴳ',
  'H': 'ᴴ', 'I': 'ᴵ', 'J': 'ᴶ', 'K': 'ᴷ', 'L': 'ᴸ',
  'M': 'ᴹ', 'N': 'ᴺ', 'O': 'ᴼ', 'P': 'ᴾ', 'R': 'ᴿ',
  'T': 'ᵀ', 'U': 'ᵁ', 'V': 'ⱽ', 'W': 'ᵂ'
}

// 常用字符
const commonChars = [
  '₂', '¹', '⁰', '⁴', '⁺', '⁻', '₌', '₍', '₎',
  '₀', '₅', '₃', '₄', '₊', '₌', '₍', '₎',
  '℃', '℉', '°', '±', '×', '÷', '√', '∞',
  'α', 'β', 'γ', 'δ', 'ε', 'θ', 'λ', 'μ', 'π', 'σ', 'φ', 'ω'
]

// 修改选择字符方法 - 插入到光标位置
const selectCharacter = (char) => {
  const input = inputRef.value ? inputRef.value.$el.querySelector('input') : null
  
  const startPos = lastCursorPosition.start
  const endPos = lastCursorPosition.end
  const inputValue = selectedChars.value
  
  selectedChars.value = 
      inputValue.substring(0, startPos) + char + 
      inputValue.substring(endPos, inputValue.length)
  
  // 更新光标位置
  const newCursorPos = startPos + char.length
  lastCursorPosition = { start: newCursorPos, end: newCursorPos }
  
  // 重新聚焦并设置光标位置
  if (input) {
    setTimeout(() => {
      input.focus()
      input.setSelectionRange(newCursorPos, newCursorPos)
    }, 0)
  }
  
  emit('character-selected', char)
}

// 复制到剪贴板
const copyToClipboard = async () => {
  if (!selectedChars.value) {
    ElMessage.warning('没有字符可复制')
    return
  }
  
  try {
    await navigator.clipboard.writeText(selectedChars.value)
    ElMessage.success('已复制到剪贴板')
  } catch (err) {
    ElMessage.error('复制失败')
  }
}

// 暴露方法给父组件
defineExpose({
  clearSelection: () => {
    selectedChars.value = ''
  },
  getSelectedChars: () => selectedChars.value,
  getAndClearSelectedChars: () => {
    const chars = selectedChars.value
    selectedChars.value = ''
    return chars
  }
})
</script>

<style scoped>
.character-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  margin: 15px 0;
  max-height: 300px;
  overflow-y: auto;
}

.char-button {
  height: 36px;
  font-size: 16px;
  padding: 6px;
  width: 36px;
}

.char-button:first-child {
  margin-left: 12px;
}

.selected-characters {
  margin-top: 20px;
}

:deep(.el-tabs__content) {
  min-height: 350px;
}
</style>